<template>
  <ul class="list">
      <li class="item" 
      v-for="(item,index) in letters" 
      :key="index"
      :ref = "item"
      @click="handelChange"
      @touchstart="handelTouchStart"
      @touchmove="handelTouchMove"
      @touchend="handelTouchEnd"
      >
      {{item}}
      </li>
  </ul>
</template>

<script>
export default {
  components:{},
  props:{
      cities:Object
  },
  data(){
    return {
      touchStatus:false,
      startY:'',
      timer:null
    }
  },
  updated(){
    this.startY = this.$refs['A'][0].offsetTop
  },
  computed:{
    letters () {
        let letters = []
        for (let key in this.cities) {
            letters.push(key)
        }
        return letters
    }
  },
  watch:{},
  methods:{
      handelChange(e){
          this.$emit('change',e.target.innerText)
          console.log(e.target.innerText)
      },
      handelTouchStart(){
          this.touchStatus = true
        console.log('start')
      },
      handelTouchMove(e){
          if(this.touchStatus){
            //  const startY = this.$refs['A'][0].offsetTop
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.timer =  setTimeout(() => {
                const touchY = e.touches[0].clientY - 79
                const index = Math.floor((touchY - this.startY)/20)
                if(index >= 0 && index<this.letters.length)
                this.$emit('change',this.letters[index])
                },16)
            }
      },
      handelTouchEnd(){
          this.touchStatus = false
      console.log('end')
      }
  },
  created(){},
  mounted(){}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
  display flex
  flex-direction column
  justify-content center
  position absolute
  top 1.58rem
  bottom 0
  right 0
  width 0.4rem
  .item
    text-align center
    line-height 0.4rem
    color $bgColor
</style>